<template>
	<view class="g-h5 body-content">
		<u-navbar back-text="返回" title="文章详情"></u-navbar>
		<view class="detail-content">
			<view class="detail-left">
				<image class="detail-img"
					src="https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg"
					mode=""></image>
			</view>
			<view class="detail-right">
				<view class="detail-right-top">
					<view class="detail-book-title-view">
						<view class="detail-book-title-text">理想国（汉译世界学术名著丛书）</view>
						<view class="book-detail-score">9.0</view>
					</view>
					<view class="detail-book-info-view">
						<view class="detail-info-view">
							<view>作者：柏拉图</view>
							<view class="books-num">字数：34.7万字</view>
							<view>出版社：江苏文艺出版社</view>
						</view>
						<!-- <view class="score-num">1531人评分</view> -->
					</view>
				</view>
				<view class="detail-right-middle">
					<view class="detail-book-price">
						<view class="price-view">
							<view class="price-text">价格：1999阅饼</view>
							<view class="pirce-line"></view>
							<view class="del-price-text">原价：5999阅饼</view>
						</view>
						<view class="price-btn-view">
							<view v-if="isBuy" class="fee-read" @tap.stop="goRead(1)">点击阅读</view>
							<view v-if="!isBuy" class="fee-read" @tap.stop="goRead(2)">免费试读</view>
							<view v-if="!isBuy" class="buy-book-btn" @tap.stop="buyBooks">4折购买</view>
						</view>
					</view>
				</view>
				<view class="detail-right-bottom">
					柏拉图的《理想国》探讨了许多重要的主题，如正义、政治、教育和哲学。他通过对话的方式，引导读者思考关于国家的管理、个人责任和社会秩序等问题。这本书对于理解古希腊哲学和政治思想的发展具有重要意义，也对后世的政治哲学和社会学产生了深远的影响。
				</view>
			</view>
		</view>
		<u-tabbar v-model="tabCurrent" :list="tabList"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isBuy: false,
				login: false,
				tabList: [{
						iconPath: 'home',
						selectedIconPath: 'home-fill',
						text: '在读',
						customIcon: false,
						pagePath: '/pages/miniprogram/index'
			 			 					},
					{
						iconPath: 'photo',
						selectedIconPath: 'photo-fill',
						text: '书架',
						customIcon: false,
						pagePath: '/pages/miniprogram/books'
			 			 					},
					{
						iconPath: 'https://cdn.uviewui.com/uview/common/min_button.png',
						selectedIconPath: 'https://cdn.uviewui.com/uview/common/min_button_select.png',
						text: '书店',
						customIcon: false,
						pagePath: '/pages/miniprogram/bookshop'
			 			 					},
					{
						iconPath: 'play-right',
						selectedIconPath: 'play-right-fill',
						text: '我的',
						customIcon: false,
						pagePath: '/pages/miniprogram/user'
			 			 					},
			 			 				],
				tabCurrent: 0,
			}
		},
		onShow() {
			if (uni.getStorageSync('phone')) {
				this.login = true
			} else {
				this.login = false
			}
		},
		methods: {
			buyBooks() {
				if (this.login) {
					uni.showModal({
						content: '请确认支付',
						success: res => {
							if (res.confirm) {
								uni.showToast({ title: '购买成功' })
								this.isBuy = true
								this.$api.bookshelf_create({
									'title': '理想国（汉译世界学术名著丛书）',
									'author': '柏拉图',
									'cover': 'https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg'
								})
							}
						}
					})
				} else {
					uni.showModal({
						content: '未登录,请登录后操作',
						confirmText: '登录',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({ url: '/pages/miniprogram/login' })
							}
						}
					})
				}
			},
			goRead(index) {
				uni.navigateTo({ url: '/pages/miniprogram/reader?isbuy=' + index })
			}
		}
	}
</script>

<style scoped>
	.detail-content {
		display: flex;
		width: 100%;
		background-color: #fff;
	}

	.detail-left {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0rpx 20rpx;
		border-right: 1rpx solid #F0F0F0;
	}

	.detail-right {
		flex: 1;
	}

	.detail-img {
		width: 156rpx;
		height: 208rpx;
	}

	.detail-right-top {
		padding: 30rpx 50rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.detail-book-title-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail-book-title-text {
		font-size: 40rpx;
	}

	.book-detail-score {
		font-size: 34rpx;
	}

	.detail-book-info-view {
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: 300;
	}

	.detail-info-view {
		/* display: flex; */
	}

	.books-num {
		/* margin: 0 20rpx; */
	}

	.detail-right-middle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 50rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.detail-book-price {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.price-view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.pirce-line {
		margin: 0 20rpx;
		width: 2rpx;
		height: 20rpx;
		background-color: #F0F0F0;
	}

	.del-price-text {
		color: #999;
		text-decoration: line-through;
	}

	.detail-code-img {
		width: 75px;
		height: 75px;
		margin-left: 20rpx;
	}

	.price-btn-view {
		display: flex;
		font-size: 28rpx;
		color: #fff;
		margin-top: 40rpx;
	}

	.fee-read {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #8BC34A;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;
	}

	.buy-book-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F26552;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;
		margin-left: 20rpx;
	}

	.detail-right-bottom {
		font-size: 24rpx;
		font-weight: 300;
		padding: 30rpx 50rpx;
		line-height: 34rpx;
	}

	.detail-content1 {
		display: flex;
		width: 100%;
		margin-top: 80rpx;
	}

	.book-detail-info-view-left {
		width: 70%;
		background-color: #fff;
	}

	.book-detail-info-view-right {
		flex: 1;
		background-color: #FAFAFA;
	}

	.book-detail-right-top {
		padding: 120rpx 70rpx 80rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.book-detail-right-bottom {
		padding: 80rpx 70rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.see-title-view {
		font-size: 34rpx;
	}

	.books-view {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.books-item-view {
		margin-top: 40rpx;
	}

	.books-image {
		width: 105px;
		height: 140px;
	}

	.detail-books-name {
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.detail-books-autor {
		font-size: 24rpx;
		font-weight: 300;
		margin: 14rpx 0 10rpx;
	}

	.detail-see-view {
		display: flex;
		align-items: center;
	}

	.see-num-text {
		font-size: 24rpx;
		font-weight: 300;
	}

	.bank-view {
		display: flex;
		flex-direction: column;
	}

	.bank-view-list-sel {
		display: flex;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-view-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-book-id {
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bank-book-name {
		margin-left: 30rpx;
	}

	.bank-book-image {
		width: 63px;
		height: 84px;
		margin: 0 30rpx;
	}

	.bank-books-name-text {
		font-size: 24rpx;
		color: #000;
	}

	.books-see-view {
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.see-num-text {
		margin-left: 10rpx;
	}

	.middle-view-item {
		flex: 1;
		border-right: 1rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
	}

	.book-item-view {
		flex: 1;
		padding: 60rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.book-image {
		width: 102px;
		height: 136px;
	}

	.book-text1 {
		width: 102rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 26rpx;
		margin: 14rpx 0 10rpx;
	}

	.book-text2 {
		font-size: 22rpx;
		color: #999;
	}

	.book-title {
		font-size: 32rpx;
	}

	.autor {
		font-size: 24rpx;
		font-weight: 300;
		margin-top: 20rpx;
	}

	.instroduce-text {
		font-size: 24rpx;
		font-weight: 300;
		margin-top: 40rpx;
	}

	.image-view {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 250rpx;
	}

	.logo-image {
		width: 158px;
		height: 208px;
	}
</style>